<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>
    第二课.
    创建新的节点
  </title>
</head>
<body>

在DOM树中查找节点
document.getElementsByClassName(''); (IE9 +)
document.getElementsByName('');

HTML5 中定义的选择器方法 (IE9 +)
node.querySelector()
node.querySelectorAll()

document.all 只返回页面中所有的标签元素 Nodelist
        .all[index]
        .all[id]
// 并不是W3C标准

<!-- ============================================= -->

DOM中的 节点树和元素树
↘                |     节点树            |       元素树      | (IE8 +)
获取父节点        |     parentNode               parentElementNode
获取全部子节点     |    childNodes               children
获取第一个子节点   |    firstChild               firstElementChild
获取最后一个子节点 |    lastChild                lastElementChild
获取下一个兄弟     |    nextSibling              nextElementSibling
获取上一个兄弟     |    previousSibling          previousElementSibling

document.documentElement 获取页面中的HTML标签
document.body 获取页面中的body标签

<!-- ================================================ -->

创建节点(注意：页面中任意一个新节点都必须由 document 对象来创建 ❤ 兼容最佳)
  1. 创建新的属性节点
     var attr = document.cteateAttribute('属性名')
     attr.value = '';
     element.setAttributeNode(attr);
  2. 创建一个新的元素节点
     var element = document.createElement('元素名');
  3. 创建一个新的文本节点
     ver txt = document.createTextNode('文本内容');
  4. 创建一个注释节点
     var comment = dcoument.createComment('注释内容');
  5. 创建一个新的文档片段节点
     var fragment = document.createDocumentFragment();

追加一个节点：
  // @example
  var h2 = document.createElement('h2');
  // h2.innerHTML = '世界';
  var txt = document.createTextNode('世界的一色');
  h2.appendChild(txt);
  var attr = document.createAttribute('class');
  attr.value = 'red';
  h2.setAttributeNode(attr);
  // var document.body.appendChild(h2);

  var fragment = document.createDocumentFragment();
  fragment.appendChiled(h2);

  document.body.appendChild(fragment);

添加元素：
  parent.appendChild(newChild); // 添加到最后
  parent.inserBefore(newChild,exstiongChild); // 添加到之前



<script>
  /* @example 面向对象的继承 */
  /* Plane is a FlyingObject */
  var fo = {};
  fo.name = '飞行物';
  fo.speed = 0;
  fo.fly = function () {
    console.log(this.name + '正在飞，时速：' + this.speed);
  };
  fo.land = function () {
    console.log(this.name + '在着陆')
  };
  var plane = {};
  plane.capacity = 200;
  plane.load = function () {
    console.log('飞机在装载乘客')
  };

  /* 修改飞机对象的原型 —— 修改父对象 继承对象*/
  Object.setPrototypeOf(plane, fo); // 继承对象
  plane.speed = 1500;
  console.log(plane.speed);
  console.log(fo.speed);

  /* @example 面向对象2 */
  function FoObject(speed) {
    this.speed = speed;
  }
  function Plane(capacity) {
    this.capacity = capacity;
    this.load = function () {
      console.log('飞机在飞');
    }
  }
  Plane.prototype = new FoObject(2000);

  /* @example 面向对象3 ❤ 对象模板 继承*/
  function Flying(name, speed) {
    this.name = name;
    this.speed = speed;
    this.load = function () {
      console.log('fei');
    };
  }
  // var fly = new Flying('df',2000);
  function Plans(name, speed, capacity) {
    Object.setPrototypeOf(this, new Flying('toma', 1500));
    this.capacity = capacity;
    this.flay = function () {
      console.log('helo')
    };
  }
  // 使用时 var Plane = new Plans('name',2000,200);

  /* @example 面向对象4 */
  var fly1 = Object.create({}); // 继承一个空对象 =>({name:'toma'})


  /**
   * ❤ 可以用来设置Option -#----- 并不好使，还是用 $.extend
   */
  var option = {
    url: '13123.121.12',
    data: 'td',
    mark: function () {
      console.log('hello');
    }
  };
  function Sub(option) {
    this.opt = {
      name: 'data',
      url: 'www.www'
    };
    this.option = option;
    Object.setPrototypeOf(this.option, this.opt);
    console.log(this.option.url);
  }
  var sub = new Sub(option);

  /* --------------------------------------------- */

  /* 创建一个属性,添加到元素上，兼容性GOOD~ */
  function change(element, className) {
    var attr = document.createAttribute('class');
    attr.value = className;
    element.setAttributeNode(attr);
  }

</script>
</body>
</html>